<template >
<div class="photoinfo-container">
    <h3>{{photoinfo.title}}</h3>
    <p class="subtitle">
        <span>发表时间:{{photoinfo.add_time | format}}</span>
        <span>点击:{{ photoinfo.click}}次</span>
    </p>
    <hr>

    <!-- 缩略图区域 -->
    <div id="thumbs">
        <vue-preview :slides="list"  @close ="getSlt"></vue-preview>
    </div>

    <!-- 图片文字内容区域 -->
    <div class="content" v-html="photoinfo.content"> </div>

    <!-- //评论区 -->
    <cmt-box :id="id"></cmt-box>
    
</div>
    
</template>
<script>
//1.导入评论子组件
import comment from "../subcomponents/comment.vue";
import {getImgInfo} from "@/api";

//缩略图引入和样式
import {getThum} from "@/api";
import '../../lib/css/golbal.css';//外部引入css



export default {
    data(){
        return{
            photoinfo:{},
            list:[],
            id:this.$route.params.id
        }
    },
    methods: {
        //获取图片列表后图片详情
        getPhotoinfo(imgId){
            getImgInfo(imgId).then(res=>{
                // console.log(res,99);
                
                if(res.data.status==0){
                    this.photoinfo = res.data.message[0];
                }
                
            })       
        
        },
        getSlt(sltid){//这里的getSlt是上面@close后面的那个方法,你把那个名字改一下你这个主要是这个方法每被调用
            getThum(sltid).then(result=>{
                // console.log(result,1314);
                if(result.data.status==0){
                    result.data.message.forEach(item => {
                        item.w =300;
                        item.h=300;
                        item.msrc=item.src;
                        
                    });
                    this.list = result.data.message;
                    console.log(this.list,8899);
                    
                }
                
            })

        }
        
        
    },
    created() {
        this.getPhotoinfo(this.id);
        this.getSlt(this.id);
        
    },
    components:{
        "cmt-box":comment
    }
    
}
</script>
<style lang="less" scoped>
.photoinfo-container {
  padding: 3px;
  h3 {
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }

  .content {
    font-size: 13px;
    line-height: 30px;
  }

  .thumbs{
    img{
      margin: 10px;
      box-shadow: 0 0 8px #999;
    }
  }
}
//外部引入css内容'
#thumbs .my-gallery{
    overflow: hidden;
}

#thumbs .my-gallery figure{
    padding: 5px;
    width: 100px;
    height: 70px;
    float: left;
    margin: 0;
    box-sizing: border-box;
}
#thumbs .my-gallery figure a{
    width: 100%;
    display: block;
}
#thumbs .my-gallery figure img{
    display: block;
    width: 100%;
}
</style>

